<script setup>
import * as Echarts from 'echarts'
const props = defineProps({
  echartsWidth: {
    type: String,
    default: '100%'
  },
  echartsHeight: {
    type: String,
    default: '300px'
  },
  echartsOption: {
    type: Object,
    default() {
      return {}
    }
  },
  dataEcharts: {
    type: Object,
    default() {
      return {}
    }
  }
})
const emit = defineEmits(['echartsClick'])

const echartsIns = ref('')
const echartsRef = ref()
onMounted(() => {
  initEcharts(true)
  window.onresize = () => {
    echarts.value?.resize(false)
  }
})
watch(
  () => props.echartsOption,
  (newValue, oldValue) => {
    initEcharts(false)
  },
  { deep: true }
)
const initEcharts = () => {
  echartsIns.value = Echarts.init(echartsRef.value)
  echartsIns.value.setOption(props.echartsOption, true)
  echartsIns.value.off('click')
  echartsIns.value.on('click', (param) => {
    emit('echartsClick', param)
  })
  // echartsIns.value.on('legendselectchanged', (params) => {
  //   legendselectchanged?emit('legendselectchanged', params)
  // })
}
</script>

<template>
  <div class="echarts" ref="echartsRef" :style="{ width: echartsWidth, height: echartsHeight }"></div>
</template>

<style lang="scss" scoped></style>
